<script lang="ts" setup>
  import { Form, Message } from '@arco-design/web-vue';
  import { ref } from 'vue';
  import { refuseInvite } from '@/api/operator';

  const props = defineProps<{
    inviteId: string;
  }>();

  const emit = defineEmits(['close']);

  const submitting = ref(false);
  const formRef = ref<InstanceType<typeof Form> | null>(null);
  const data = ref({ value: '' });

  const handleSubmit = async () => {
    if (formRef.value) {
      const vs = await formRef.value.validate();

      if (!vs) {
        try {
          await refuseInvite(props.inviteId, {
            reason: data.value.value,
          });
          Message.success('已拒绝执行机构入驻');
          emit('close', true);
        } finally {
          submitting.value = false;
        }
      }
    }
  };
</script>

<template>
  <a-modal
    title="拒绝入驻"
    :width="500"
    visible
    :ok-loading="submitting"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <a-form ref="formRef" :model="data" layout="vertical">
      <a-form-item
        label="请输入拒绝入驻原因"
        field="value"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-textarea v-model="data.value" :auto-size="{ minRows: 5 }" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
